<template>
    <div id="manage">
        <date-picker-con></date-picker-con>
        <div
            ref="articleData"
            class="article-data"
        >
            <el-table
                v-loading="loading"
                :data="commentList"
                border
                style="width: 100%"
                :max-height="tableMaxHeight"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="80"
                    align="center"
                ></el-table-column>

                <el-table-column
                    prop="commentCon"
                    label="评论内容"
                    min-width="300"
                >
                </el-table-column>
                <el-table-column
                    prop="commentTime"
                    label="评论时间"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    prop="articleTitle"
                    label="所属文章标题"
                    min-width="200"
                >
                </el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    width="100"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <blog-pagination
                :total="total"
                @on-size-change="onSizeChange"
                @on-page-change="onPageChange"
            ></blog-pagination>
        </div>
    </div>
</template>

<script>
    import { manageCommonMixins } from 'assets/js/mixins';
    import { searchComment, deleteComment } from 'assets/js/api';
    export default {
        mixins: [
            manageCommonMixins
        ],
        data () {
            return {
                commentList: [], // 评论数据
                startTime: '', // 起始时间
                endTime: '', // 终止时间
                total: 0, // 总条数
                pageSize: 20, // 每页条数
                pageNum: 1, // 页码
                loading: true // table loading flag
            };
        },
        mounted () {

        },
        methods: {
            /**
             * 删除评论
             * @param {Number} index 该评论索引
             * @param {Object} row 该评论信息
             */
            handleDelete (index, row) {
                deleteComment({
                    _id: row._id
                }).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.$message.success(res.msg);
                    this.searchComment();
                });
            },
            /**
             * 时间范围改变事件
             * @param {Array} date 当前选择的时间范围
             */
            dateChange (date) {
                this.startTime = date[0];
                this.endTime = date[1];
                this.searchComment();
            },
            /**
             * pageSize改变事件
             * @param {String} size 当前pageSize
             */
            onSizeChange (size) {
                this.pageSize = size;
                this.searchComment();
            },
            /**
             * 页码改变事件
             * @param {String} page 当前页码
             */
            onPageChange (page) {
                this.pageNum = page;
                this.searchComment();
            },
            /**
             * 查询评论数据
             */
            searchComment () {
                let paramsJson = {
                    pageSize: Number(this.pageSize),
                    pageNum: Number(this.pageNum),
                    startTime: this.startTime,
                    endTime: this.endTime
                };
                this.loading = true;
                searchComment(paramsJson).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.total = res.data.total;
                    this.commentList = res.data.list;
                    this.loading = false;
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/manageCommon';
</style>
